// 创建一个路由实例
import { createRouter, createWebHistory } from "vue-router";

// import命令是同步引入的
// import函数可以做异步引入, 路由懒加载
// import Main from "../pages/main/Index.vue";
// import Login from "../pages/login/Index.vue";
// import Register from "../pages/register/Index.vue";
// import Detail from "../pages/detail/Index.vue";
// import NotFound from "../pages/notFound/Index.vue";

// import Home from "../pages/main/home/Index.vue";
// import Classify from "../pages/main/classify/Index.vue";
// import Cart from "../pages/main/cart/Index.vue";
// import Mine from "../pages/main/mine/Index.vue";

// 路由表
const route = [
  {
    path: "/",
    redirect: "/main",
  },
  {
    path: "/main",
    component: () => import("../pages/main/Index.vue"),
    children: [
      {
        path: "/main",
        redirect: "/main/home",
      },
      {
        path: "home",
        component: () => import("../pages/main/home/Index.vue"),
        meta: {
          title: "首页",
        },
      },
      {
        path: "classify",
        component: () => import("../pages/main/classify/Index.vue"),
        meta: {
          title: "分类页",
        },
      },
      {
        path: "cart",
        component: () => import("../pages/main/cart/Index.vue"),
        meta: {
          title: "购物车业",
        },
        // 路由独享守卫
        // 全局前置守卫能做的，这里都能做
        beforeEnter(to, from, next) {
          if (localStorage.getItem("token")) {
            next();
          } else {
            next("/login");
          }
        },
      },
      {
        path: "mine",
        component: () => import("../pages/main/mine/Index.vue"),
        // 路由原信息
        // 是一个对象，里面随意发挥
        meta: {
          isRequireLogin: true,
          title: "我的页",
        },
      },
    ],
  },
  {
    path: "/login",
    component: () => import("../pages/login/Index.vue"),
    meta: {
      title: "登录页",
    },
  },
  {
    path: "/register",
    component: () => import("../pages/register/Index.vue"),
    meta: {
      title: "注册页",
    },
  },
  {
    path: "/detail/:id",
    component: () => import("../pages/detail/Index.vue"),
    meta: {
      title: "详情页",
    },
  },
  {
    path: "/city",
    component: () => import("../pages/city/Index.vue"),
  },
  {
    path: "/:pathMatch(.*)*",
    component: () => import("../pages/notFound/Index.vue"),
  },
];

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: route,
  // scrollBehavior(to, from, savedPosition) {
  // return 期望滚动到哪个的位置
  // return { top: 0 };
  // savedPosition只有在前进或者后退有效
  // if (savedPosition) {
  //   return savedPosition;
  // } else {
  //   return { top: 0 };
  // }
  // },
});

// 全局前置守卫
// 只要页面有跳转就会执行
router.beforeEach((to, from, next) => {
  // to表示要去的那个页面的路由信息
  // from表示要来的那个页面的路由信息
  // console.log(to);
  // ...
  // 返回 false 以取消导航
  // return true;

  // next()放行 next(false)不放行 next("/xxx")重定向
  // next();

  // 路由鉴权
  // if (to.path === "/main/mine") {
  if (to.meta.isRequireLogin) {
    if (!localStorage.getItem("token")) {
      next("/login");
    } else {
      next();
    }
  } else {
    next();
  }
});

// 全局解析守卫
// 语法和作用是和全局前置守卫完全一样的
// 只是执行时机是在异步文件加载之后
router.beforeResolve((to, from, next) => {
  next();
});

// 全局后置钩子
// 跳转被确认之后执行
// 没有第三个参数next
router.afterEach((to, from) => {
  document.title = to.meta.title || "xxx商城";
});

export default router;
